<template>
	<view class="goal-big">
		<view>
			<view class="box">
				<view class="box1">
					<view class="">
						<text>课程学习中</text>
					</view>
					<view class="">
						<text>如需退款请线下联系主讲老师</text>
					</view>
				</view>
				<view class="img">
					<image
						src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AF%BE%E7%A8%8B%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85_1/u4714.png"
						mode=""></image>
				</view>
			</view>
		</view>
		<view class="middle">
			<view class="box2">
				<view class="card">
					<image :src="data.courseUrl"></image>
				</view>
				<view class="content">
					<view>{{data.courseName}}</view>
					<view>￥2999.00/10课时</view>
				</view>
			</view>
			<view class="line">
				<image
					src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AF%BE%E7%A8%8B%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85/u4562.png"
					mode=""></image>
			</view>
			<view class="msg">
				<view class="msg1">
					<view><text>课程总额</text></view>
					<view><text>优惠券</text></view>
					<view><text>积分抵扣</text></view>
					<view><text>实付</text></view>
				</view>
				<view class="msg2">
					<view><text>{{data.orderPrice}}</text></view>
					<view><text>{{data.ticket}}</text></view>
					<view><text>{{data.integration}}</text></view>
					<view><text style="color: #999999;">￥</text><text>{{data.lastPay}}</text></view>
				</view>
			</view>
		</view>
		<view class="middle1">
			<view class="msg">
				<view class="msg1">
					<view><text>订单编号</text></view>
					<view><text>支付方式</text></view>
					<view><text>下单时间</text></view>
					<view><text>付款时间</text></view>
				</view>
				<view class="msg2">
					<view><text>{{data.orderNum}}</text><text style="color: #ff0000;margin-left: 8rpx;">复制</text></view>
					<view><text>{{data.payMethod}}</text></view>
					<view><text>{{data.submitTime}}</text></view>
					<view><text>2022-11-04</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {onLoad} from "@dcloudio/uni-app"
import http from "@/utils/http.js";
import {ref} from 'vue'
let data=ref();
let Num=ref();
onLoad((option)=>{
  Num.value=option.Num
  http({
	  url:'/order/queryAllInfo',
	  params:{orderNum:Num.value}
  }).then((res)=>{
	  data.value=res.data
  })
 })
</script>
<style lang="less">
	page {
		background-color: #f9f9f9;
	}

	.goal-big {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}

	.box {
		width: 670rpx;
		height: 192rpx;
		background: linear-gradient(270deg, rgba(102, 153, 255, 1) 0%, rgba(102, 153, 255, 1) 0%, rgba(102, 51, 255, 1) 100%, rgba(102, 51, 255, 1) 100%);
		border-radius: 16rpx;
		margin-top: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.box1 {
		margin-left: 40rpx;
	}

	.box1 view:nth-child(1) {
		font-size: 32rpx;
		color: #ffffff;
		font-weight: 400;
		margin-bottom: 22rpx;
	}

	.box1 view:nth-child(2) {
		font-size: 24rpx;
		color: #ffffff;
		font-weight: 400;
		margin-bottom: 22rpx;
		display: flex;
		margin-top: 22rpx;
		margin-bottom: 0;
	}

	.img image {
		width: 70rpx;
		height: 80rpx;
		margin-right: 40rpx;
	}

	.middle {
		width: 670rpx;
		height: 496rpx;
		background: #ffffff;
		margin-top: 16rpx;
		border-radius: 16rpx;
	}

	.middle1 {
		width: 670rpx;
		height: 250rpx;
		background: #ffffff;
		margin-top: 20rpx;
		border-radius: 16rpx;
	}

	.box2 {
		display: flex;

		.content {
			margin-left: 24rpx;
			margin-top: 60rpx;

			view:nth-child(1) {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 20rpx;
			}
		}

		.content view:nth-child(2) {
			font-size: 28rpx;
			font-weight: 700;
			color: rgb(239, 179, 54);
		}
	}

	.card {
		border-radius: 8rpx;
		margin-left: 24rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	
		image {
			width: 174rpx;
			height: 128rpx;
		}
	}

	.line {
		text-align: center;
		color: #333333;
		font-weight: 400;

		image {
			height: 4rpx;
			width: 608rpx;
		}
	}

	.msg {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 24rpx 28rpx 24rpx;

		.msg1 text {
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
		}

		.msg1 view {
			margin-bottom: 16rpx;
		}

		.msg2 {
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;

			view {
				margin-bottom: 16rpx;
				display: flex;
				justify-content: flex-end;
			}
		}
	}

	.bottom {
		width: 750rpx;
		height: 120rpx;
		background-color: #ffffff;
		border-top: 1px solid rgba(225, 225, 225, 1);
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		view:nth-child(1) {
			width: 148rpx;
			height: 56rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #2f78ff;
			border: 1px solid rgb(47, 120, 255);
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 24rpx;
		}

		view:nth-child(2) {
			width: 148rpx;
			height: 56rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #ffffff;
			background-color: #2f78ff;
			border: 1px solid rgb(47, 120, 255);
			box-shadow: rgba(47, 120, 255, 0.298) 0px 2px 10px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
